<!--
 * @Descripttion: 
 * @version: 
 * @Author: wangys
 * @Date: 2022-06-08 15:15:23
-->
<template>
  <div class="header">
    <div class="container">
      <!-- logo部分 -->

      <a class="logo" href="/home/index">
        <img src="../assets/img/logo.png" alt="" />
      </a>
      <ul class="nav">
        <li><router-link to="/home/index">首页</router-link></li>
        <li><router-link to="/home/tool">工具</router-link></li>
        <li><router-link to="/home/timeline">时间线</router-link></li>
        <li><router-link to="/home/calendar">日历</router-link></li>
        <li><router-link to="/home/classify">分类</router-link></li>
        <!-- <li><router-link to="/home/tag">标签</router-link></li> -->
        <!-- <li><router-link to="/home/message">留言板</router-link></li> -->
        <li><router-link to="/home/about">关于</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Header'
}
</script>

<style lang="less" scoped>
.header {
  height: 60px;
  // background: #1ebcf0;
  background: rgba(30, 188, 240, 0.3);
  .container {
    width: 1080px;
    display: flex;
    height: 100%;
    margin-left: 410px;
    // margin: 0 auto;
    // border-bottom: 1px solid #1ebcf0;
    .logo {
      display: inline-block;
      width: 60px;
      height: 60px;
      // background: url('../assets/logo.png') center/contain;
      img {
        width: 60px;
        height: 60px;
      }
    }
    .nav {
      display: flex;
      margin-left: 20px;
      li {
        margin-right: 20px;
        line-height: 60px;
        font-weight: 800;
        font-size: 14px;
      }
    }
    a:hover {
      font-size: 20px;
    }
  }
}
</style>
